<template>
    <div class="app-container">
        <el-card shadow="never">
            <div class="if_comment">
                <el-row>
                    <div shadow="never" class="top-view">
                        <el-row>
                            <el-form :inline="true" class="demo-form-inline">
                                <el-form-item label="评论配置">
                                </el-form-item>
                                <el-form-item style="margin-left: 500px">
                                    <el-button type="success" @click="selectAll">全选</el-button>
                                </el-form-item>
                                <el-form-item>
                                    <el-button @click="delAll">清空</el-button>
                                </el-form-item>
                                <el-form-item>
                                    <el-button @click="saveData" type="primary">保存</el-button>
                                </el-form-item>
                            </el-form>
                        </el-row>
                    </div>
                </el-row>
            </div>
            <el-row :gutter="5">
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item label="评论开启：">
                    </el-form-item>
                    <el-form-item>
                        <el-tree default-expand-all :data="treeData" :props="treeProps" show-checkbox node-key="uid"
                            ref="tree" @setCheckedNodes="setCheckedNodes" :default-checked-keys="checkedKeys"
                            check-strictly>
                        </el-tree>
                        <!--  @check="handleNodeClick" -->
                    </el-form-item>
                </el-form>
            </el-row>
        </el-card>
    </div>
</template>

<script>
import XPagination from "../../components/xpagination/XPagination";
import * as classifyManger from "../../api/classifyManger"
import * as formUtils from "../../utils/formUtils";
import XContextmenu from "../../components/xcontextmenu/XContextmenu";
export default {
    name: "list",
    components: { XContextmenu, XPagination },
    data () {
        return {
            optionData: {},
            node: null,
            tree: null,
            treeData: [],
            treeProps: {
                children: "children",
                label: "classifyName"
            },
            checkedArr: [],
            loading: false,
            checkedKeys: []
        }
    },
    methods: {
        handleNodeClick (data, node) {
            console.log(data)
            if (node.checkedNodes.length > 0) {
                node.checkedNodes.map(item => {
                    item.commentOpen = true
                })
            }
        },
        getData () {
            classifyManger.queryTree({}).then(result => {
                console.log(result);
                this.treeData = result.data.data;
                this.treeLoop(this.treeData)
            }).catch(error => {
                console.log(error);
            })
        },
        handleSave () {
            this.$refs.form.validate((valid) => {
                if (!valid) {
                    return false;
                }
                this.dispatchSave();
            });
        },
        handleEdit () {
            const param = Object.assign({}, this.form);
            classifyManger.updateBatch(param).then(result => {
                this.getData();
                this.$message.success("修改成功");
                this.dialogVisible = false;
            }).catch(error => {
                console.log(error);
                this.$message.error("修改失败" + error);
            });
        },
        getSelectedData () {
            var selectedNodes = this.$refs.tree.getCheckedNodes(false, true); // 获取选中的节点数据
            var dataList = selectedNodes.map(node => node.uid); // 提取节点数据
        },
        selectAll () {
            this.$refs.tree.setCheckedKeys(this.checkedArr);
        },
        delAll () {
            this.$refs.tree.setCheckedKeys([]);
        },
        treeLoop (tree) {
            tree.forEach(item => {
                if (item.children.length > 0) {
                    this.treeLoop(item.children)
                }
                this.checkedArr.push(item.uid)
                if (item.commentOpen == '是') {
                    this.checkedKeys.push(item.uid)
                }
            })
        },
        saveData () {
            let arr = this.$refs.tree.getCheckedKeys()
            let uids = []
            arr.forEach(item => {
                uids.push(item)
            })
            classifyManger.updateBatch({ uidAry: uids }).then(result => {
                if (result.data.code == 200) {
                    this.$message.success(result.data.msg);
                }
            }).catch(error => {
                console.log(error);
            })
        },
        setCheckedNodes (node) {
            console.log(node)
        }
    },
    mounted () {
        this.getData()
    }
}
</script>

<style scoped lang="scss">

</style>
